import React, { useRef, useState, useEffect } from "react";
import { Form, Input, Button, Select, Switch, InputNumber } from "antd";

const { Option } = Select;
const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 }
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 }
};

function AddFrom(props) {
  const formRef = useRef({
    us: '',
    roleId: '',
    age: 0,
    state: false,
    sex: 0,
  });
  const [isUpdate, setIsUpdate] = useState(false)
  const [rolesList, setRolesList] = useState([])

  const onFinish = values => {
    props.onOk(values);
    formRef.current.resetFields();
  };

  const onCancel = () => {
    props.onCancel();
    formRef.current.resetFields();
  };

  useEffect(() => {
    formRef.current.setFieldsValue({
      us: props.userInfo.us || '',
      roleId: props.userInfo.roleId || '',
      age: props.userInfo.age || 0,
      state: props.userInfo.state,
      sex: props.userInfo.sex || 0,
    });
    setIsUpdate(Boolean(props.id))
    setRolesList(props.rolesList)
  }, [])// eslint-disable-line react-hooks/exhaustive-deps

  return (
    <Form
      {...layout}
      ref={formRef}
      name='control-hooks'
      onFinish={onFinish}
      initialValues={{
        us: '',
        roleId: '',
        age: 0,
        state: true,
        sex: 0
      }}
    >
      <Form.Item
        name='us'
        label='账号'
        rules={[
          { required: true, whitespace: true, message: "请输入账号名称!" },
          { min: 2, message: "账号至少2位" },
          { max: 30, message: "账号最多30位" }
        ]}
      >
        <Input placeholder='请请入账号名称' />
      </Form.Item>
      {
        !isUpdate ?
          <Form.Item
            name='ps'
            label='密码'
            rules={[
              { required: true, whitespace: true, message: "请输入密码!" },
              { min: 2, message: "密码至少2位" },
              { max: 30, message: "密码最多30位" }
            ]}
          >
            <Input type="password" placeholder='请请入密码' />
          </Form.Item> : ''
      }
      <Form.Item
        name='roleId'
        label='角色'
        rules={[{ required: true }]}
      >
        <Select
          placeholder='请选择角色'
          allowClear
        >
          {
            rolesList.map(item => {
              return <Option key={item.roleId} value={item.roleId}>{item.roleName}</Option>
            })
          }
        </Select>
      </Form.Item>
      <Form.Item label="是否启用" name='state' valuePropName="checked">
        <Switch checkedChildren="是" unCheckedChildren="否"/>
      </Form.Item>
      <Form.Item
        name='sex'
        label='性别'
      >
        <Select
          placeholder='请选择性别'
          allowClear
        >
          <Option value={0}>男</Option>
          <Option value={1}>女</Option>
        </Select>
      </Form.Item>
      <Form.Item
        name='age'
        label='年龄'
      >
        <InputNumber min={0} max={200}/>
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type='primary' htmlType='submit'>
          确定
        </Button>
        <Button
          htmlType='button'
          onClick={onCancel}
          className='cancelBtn'
        >
          取消
        </Button>
      </Form.Item>
    </Form>
  );
}

export default AddFrom;
